<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" color="#156DAC" @clickLeft="pageback">
			<view class="header-icon-text-panel">
				<text class="title">打卡记录</text>
				<view style="margin-left: 10upx;" @click="showDrawer">
					<uni-icons type="search" size="16" color="#156DAC"></uni-icons>
				</view>
			</view>
		</uni-nav-bar>
		<view class="content padding">
			<view class="page-content-list">
				<block v-for="(value, index) in listData" :key="index">
					<view class="content-list-cell" @click="goDetail">
						<view class="order-item">
							<view class="order-item-top"></view>
							<view class="order-item-content">
								<view class="order-content-row">
									<view class="label">开始时间</view>
									<view class="value">{{value.startTime}}</view>
								</view>
								<view class="order-content-row">
									<view class="label">结束时间</view>
									<view class="value">
										{{ value.endTime? value.endTime: '- -'}}
									</view>
								</view>
								<view class="order-content-row">
									<view class="label">打卡人</view>
									<view class="value">{{value.engineerName}}</view>
								</view>
								<view class="order-content-row">
									<view class="label">打卡目的</view>
									<view class="value">{{value.objective || '- -'}}</view>
								</view>
								<view class="order-content-row">
									<view class="label">企业名称</view>
									<view class="value">{{value.enterpriseName || '- -'}}</view>
								</view>
								<!-- <view class="order-content-row">
									<view class="label">打卡经纬度</view>
									<view class="value">{{value.position || '- -'}}</view>
								</view> -->
								<view class="order-content-row">
									<view class="label">备注</view>
									<view class="value">{{value.remark || '- -'}}</view>
								</view>
								<!-- <view class="order-content-row">
									<view class="label">操作</view>
									<view class="value">
										<button class="order-btn">离开</button>
									</view>
								</view> -->
							</view>
						</view>
					</view>
				</block>
			</view>
			<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
		</view>

		<uniDrawer ref="draw" :mask="true" mode='right' :width="250">
			<view style="height: 90upx;">&nbsp;</view>
			<view class="draw-panel">
				<view class="operation-panel">
					<view class="drawer-form">
						<view class="drawer-form-item" v-if="role !== 'e036_05'">
							<view class="drawer-label"><text>企业筛选</text></view>
							<view class="drawer-content">
								<text v-if="query.outletName" @click="showPkPicker">{{query.outletName}}</text>
								<!-- <text v-else style="color: grey;" @click="showPkPicker">请选择企业</text> -->
								<!-- <picker>
								        <view>是滴是滴所</view>
								    </picker> -->
								<!-- <tki-tree class="ipt-ctl" ref="tkitree" :range="range" :rangeKey="rangeKey" confirmColor="#4e8af7" @confirm="pkConfirm"/> -->
								<lb-picker v-model="formData.enterpriseId" :list="companyListBak" :props="pickerProps" @confirm="(e)=>pickerSelectConfim('enterprise',e)">
									<view slot="header-top">
										<view style="padding: 10upx;">
											<uni-easyinput type="text" v-model="searchText" placeholder="请输入关键字" prefixIcon="search" @input="search" />
										</view>
									</view>
									<view class="lb-picker-placeholder-panel"
										style="text-align: right;line-height: 1.2;">
										<text v-if="formData.enterpriseId" style="border: 0;" class="lb-picker-text">{{formData.enterpriseName}}</text>
										<text v-else class="lb-picker-placeholder" style="border: 0;">请选择企业</text>
										<uni-icons class="icon" type="forward" size="20" color="#999"></uni-icons>
									</view>
								</lb-picker>
							</view>
						</view>
						<view class="drawer-form-item">
							<view class="drawer-label"><text>开始时间</text></view>
							<view class="drawer-content">
								<TimeSelector ref="stime" class="ipt-ctl" showType="dateToTime"
									@btnConfirm="(e)=>dateChange(e,'startTime')">
									<text v-if="query.startTime">{{query.startTime}}</text>
									<text v-else style="color: grey;">请选择开始时间</text>
								</TimeSelector>
							</view>
						</view>
						<view class="drawer-form-item">
							<view class="drawer-label"><text>结束时间</text></view>
							<view class="drawer-content">
								<TimeSelector ref="etime" class="ipt-ctl" showType="dateToTime"
									@btnConfirm="(e)=>dateChange(e,'endTime')">
									<text v-if="query.endTime">{{query.endTime}}</text>
									<text v-else style="color: grey;">请选择结束时间</text>
								</TimeSelector>

							</view>
						</view>
					</view>

				</view>
				<view class="bottom-panel">
					<view class="item-btn lp" @click="handleQuery"><text>确定</text></view>
				</view>
			</view>
		</uniDrawer>

	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import {
		parseTime
	} from '@/common/util.js'
	import TimeSelector from '@/components/wing-time-selector/wing-time-selector.vue';
	const listQuery = '/system/clock/listPage'
	const companyUrl = '/base/enterprise/list' // get
	export default {
		components: {
			uniIcons,
			uniLoadMore,
			uniDrawer,
			TimeSelector,
			LbPicker
		},
		data() {
			return {
				reload: false,
				listData: [],
				last_id: '',
				status: 'loading',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				formData:{
					engineerId: -1,
					enterpriseId: '',
					enterpriseName: '',
					type: 'e062_01',
					objective: '',
					remark: '',
					position: ''
				},
				query: {
					page: 1,
					limit: 10,
					startTime: null,
					endTime: null,
					enterpriseId: ''
				},
				companyListBak:[],
				companyList: [],
				pickerProps: {
					label: 'name',
					value: 'id',
				},
				searchText:'',
				role:''
			}
		},
		computed: {},
		onLoad() {
			var beforeTime = new Date().getTime() - 1000 * 60 * 60 * 24 * 30;
			var before = parseTime(new Date(beforeTime), '{y}-{m}-{d}');
			const time = parseTime(new Date(), '{y}-{m}-{d}')
			this.query.startTime = before + ' ' + '00:00:00'
			this.query.endTime = time + ' ' + '23:59:59'
			this.getList();
			this.initData();
			this.role = uni.getStorageSync('USER_ROLE')
			// this.formData.position = ''
			// uni.authorize && uni.authorize({
			// 	scope: 'scope.userLocation',
			// 	success() {
			// 		uni.getLocation({
			// 			type: 'gcj02', //返回可以用于uni.openLocation的经纬度
			// 			success: function(res) {
							
			// 				const latitude = res.latitude;
			// 				const longitude = res.longitude;
			// 				console.log('当前位置的经度：' + longitude);
			// 				console.log('当前位置的纬度：' + latitude);
			// 				this.formData.position = latitude +','+longitude
							
			// 			}
			// 		});
			// 	}
			// })
		},
		onPullDownRefresh() {
			this.last_id = '';
			this.listData = []
			this.query.page = 1
			this.getList();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 100)
		},
		onReachBottom() {
			this.status = 'more';
			this.query.page = this.query.page + 1
			this.getList(true);
		},
		methods: {
			parseTime,
			pageback() {
				uni.navigateBack({
					delta: 1
				});
			},
			pickerSelectConfim(key,e){
				const {item} = e
				const {id, name} = item
				this.formData[key+ 'Id'] = id
				this.formData[key+'Name'] = name
			},
			initData() {
				this.$api.request(companyUrl, {
					method: 'get',
				}).then(res => {
					// console.log(res)
					if (res.success) {
						console.log(res.data.list)
						this.companyList = res.data.list
						this.companyListBak.push(...res.data.list)
					}
				})
			},
			search(){
				const newList = this.companyList.filter(item=>item.name.indexOf(this.searchText) !== -1)
				this.companyListBak = newList
			},
			showPkPicker() {
				this.$refs.tkitree._show()
			},

			showDrawer() {
				this.$refs.draw.open()
			},
			goDetail() {

			},

			dateChange(data, type) {
				this.query[type] = data.key
			},

			handleQuery() {
				this.query.page = 1
				this.getList();
				this.$refs.draw.close()
			},
			getList(loadMore = false) {
				this.query.enterpriseId = this.formData.enterpriseId;
				this.status = 'loading';
				this.$api.request(listQuery, {
					method: 'get',
					data: this.query
				}).then(res => {
					// console.log(res)
					if (res.success) {
						const data = res.data
						const {
							list
						} = data
						if (list.length === 0 || data.total <= this.query.limit) {
							this.status = ''
						}
						if (loadMore) {
							this.listData = [...this.listData, ...list]
						} else {
							this.listData = list
						}
						this.last_id = this.listData[this.listData.length - 1];
						console.log(this.listData)
						this.reload = false;
					}
				}).catch(() => {})
			},
		}
	}
</script>

<style lang="scss" scoped>
	// .drawer-content {
	// 	/deep/.lb-picker-container-fixed{
	// 	left: -130px;
	// }
	// } 
	.page-content-list {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;

		.content-list-cell {
			position: relative;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	}

	.endtime {
		margin-bottom: 3px;

		.uni-input {
			background: none;
		}
	}

	.order-item {
		width: 750upx;
		background: #fff;
		padding: 20upx;
		border-radius: 20upx;
		margin-bottom: 20upx;

		.order-item-top {
			margin: -20upx;
			border-radius: 20upx 20upx 0 0;
			background-color: #156DAC;
			height: 20upx;
		}

		.order-item-content {
			margin-top: 30upx;

			.order-content-row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 26upx;
				margin-bottom: 30upx;

				.order-btn {
					display: inline-block;
					background-color: #156dac;
					color: #fff;
					width: 95upx;
					height: 50upx;
					line-height: 50upx;
					text-align: center;
					font-size: 24upx;
					padding: 0;
					margin-left: 10upx;
				}

				.label {
					flex: 0 0 200upx;
					color: #5a5a5a;
					text-align: left;
					font-size: 26upx;
				}

				.value {
					flex: 1;
					color: #000;
					text-align: right;
					font-size: 26upx;
				}
			}

		}

		.order-item-header {
			display: flex;
			align-items: center;

			.icon {
				margin-right: 10upx;
			}

			text {
				color: #333;
				font-size: 28upx;
			}
		}
	}
</style>
